<template>
	<section class="login">
		<img :src="this.$https.baseUrl + setting.site_logo" class="img1" alt="">
		<!-- <img src="../assets/newimg/logo.png" class="img1" alt=""> -->
		<img src="../assets/newimg/logobt.png" class="img2" alt="">
		<div class="ul">
			<div class="li active">
				<div>{{$t('h_title.login')}}</div>
				<i></i>
			</div>
			<div class="li" @click="gozhuce()">
				<div>{{$t('h_title.zhuce')}}</div>
			</div>
		</div>
		<div class="qiehuanyuyanBox">
			<img :src="require(''+'@/assets/images/'+ this.$i18n.locale +'.png'+'')" alt=""
				@click="yuyan_show = !yuyan_show">

			<div class="checklang" v-show="yuyan_show">
				<router-link to="" @click.native="zh" style="color: #fff;"><img src="~path_img/zh.png"
						alt=""></router-link>
				<router-link to="" @click.native="zhHK" style="color: #fff;"><img src="~path_img/zhHK.png"
						alt=""></router-link>
				<router-link to="" @click.native="en" style="color: #fff;"><img src="~path_img/en.png"
						alt=""></router-link>
			</div>
		</div>
		<div class="con">
			<article class="img-t">
				<!-- <img :src="require(''+'@/assets/images/'+ this.$i18n.locale +'.png'+'')" alt="" @click="yuyan_show = true"> -->

				<article class="article-input">
					<div>
						<img src="../assets/newimg/zhanghu.png" alt="">
					</div>
					<input type="text" :placeholder="$t('login.username_placeholder')" v-model="form.username">
				</article>
				<article class="article-input">
					<div>
						<img class="img3" src="../assets/newimg/mima.png" alt="">
					</div>
					<input :type="typePwd" :placeholder="$t('login.password_placeholder')" v-model="form.password">
					<div class="wangji"><router-link to="/forPassword">{{$t('login.wangjimima1')}}</router-link></div>
					<van-icon :name="iconPwd" size="22" color="#f49623" @click="fun_Pwd" />
				</article>
				<article class="article-btnTow">
					<p><van-checkbox v-model="checked" class="all">{{$t('login.jizhumima')}}</van-checkbox></p>
					<p><router-link to="/index">{{$t('login.wangji[3]')}}</router-link></p>
				</article>
				<button @click="fun_submit">{{$t('login.denglu_btn')}}</button>
			</article>
		</div>
		<article class="article-btn">
			<div style="margin-right: 20px;"><router-link
					to="/rechargeHelp?id=13">{{$t('h_title.zizhufuwu_list3')}}</router-link></div>
			<div><router-link to="/drawHelp?id=5">{{$t('h_title.zizhufuwu_list2')}}</router-link></div>
		</article>
		<div class="bottoms">
			<img src="../assets/newimg/loginbottomicon.png" alt="">
			<div>{{$t('login.tips')}}</div>
			<div class="img4"></div>
		</div>
		<!--切换语言模块-->
		<!-- <van-popup v-model="yuyan_show" position="bottom" class="popou_class" style="height: 5.1rem">
            <router-link to="" @click.native="zh" style="color: #fff;"><img src="~path_img/zh.png" alt="">简体中文</router-link>
            <router-link to="" @click.native="zhHK" style="color: #fff;"><img src="~path_img/zhHK.png" alt="">繁体中文</router-link>
            <router-link to="" @click.native="en" style="color: #fff;"><img src="~path_img/en.png" alt="">English</router-link>
        </van-popup> -->
		<!--切换语言模块-->
		<!--忘记密码模块-->
		<van-popup v-model="passW_show" position="bottom" class="popou_class" style="height: 5.1rem">
			<a style="color:#fff;"
				:href="this.$store.state.config.whatsapp_url">Whats:{{this.$store.state.config.whatsapp}}</a>
			<router-link to="" style="color: #fff;"
				@click.native="passW_show = false,wx_show = true">{{$t('login.wangji[0]')}}</router-link>
			<a style="color:#fff;" :href="this.$store.state.config.service_link">{{$t('login.wangji[1]')}}</a>
		</van-popup>
		<!--忘记密码模块-->
		<!--微信-->
		<van-popup v-model="wx_show">
			<img :src="this.$https.baseUrl + this.$store.state.config.wx_pic" alt="" class="img">
		</van-popup>
		<!--微信-->
	</section>
</template>

<script>
	import {
		Popup
	} from 'vant'
	import https from "@/api/https";
	export default {
		name: "login",
		components: {
			[Popup.name]: Popup
		},
		data() {
			return {
				yuyan_show: false,
				passW_show: false,
				wx_show: false,
				form: {
					username: localStorage.username,
					password: localStorage.password
				},
				typePwd: 'password',
				iconPwd: 'closed-eye',
				setting: {},
				checked: false
			}
		},
		mounted() {
			let _this = this
			this.$https.fetchPost('/m/config', {}).then((res) => {
				document.title = res.data.site_title
				this.setting = res.data
				_this.$store.commit('config', res.data)
			})
			if (localStorage.getItem('password')) {
				this.form.password = localStorage.getItem('password');
				this.form.username = localStorage.getItem('username');
			}
			this.$i18n.locale = this.$store.state.i18n
		},
		methods: {
			fun_Pwd() { //切换密码的眼睛
				this.typePwd = this.typePwd === 'password' ? 'text' : 'password'
				this.iconPwd = this.iconPwd === 'closed-eye' ? 'eye-o' : 'closed-eye'
			},
			fun_submit() { //登录
				if (this.form.username == '') {
					this.$toast(this.$t('login.username_alert'))
				} else if (this.form.password == '') {
					this.$toast(this.$t('login.password_alert'))
				} else if (this.form.password.length < 6) {
					this.$toast(this.$t('login.password_alert_length'))
				} else {
					if (this.checked) {
						localStorage.setItem('password', this.form.password)
						localStorage.setItem('username', this.form.username)
					}
					this.$https.fetchPost('/m/login', {
						'name': this.form.username,
						'password': this.form.password
					}).then(res => {
						localStorage.username = this.form.username;
						localStorage.password = this.form.password;
						this.$store.commit('token', res.data)
						this.$router.push('/index')
					})

				}
			},
			zh() {
				this.$store.commit('i18n', 'zh')
				this.$i18n.locale = 'zh'
				this.yuyan_show = false
			},
			zhHK() {
				this.$store.commit('i18n', 'zhHK')
				this.$i18n.locale = 'zhHK'
				this.yuyan_show = false
			},
			en() {
				this.$store.commit('i18n', 'en')
				this.$i18n.locale = 'en'
				this.yuyan_show = false
			},
			gozhuce() {
				this.$router.push('/zhuce')
			}
		}
	}
</script>

<style scoped lang="less">
	.login {
		height: 100%;
		min-height: 100vh;
		background: url("../assets/newimg/loginbg.png") center no-repeat;
		background-size: cover;

		.img1 {
			margin: 0 auto;
			margin: 80px 0;
			// max-width: 290px;
			max-height: 50px;
		}

		.img2 {
			width: 97%;
			margin: -10px auto 10px;
		}

		.con {
			margin: 0 17px;
			border: 0;
			border-top-width: 2px;
			border-style: solid;
			border-top-color: #f49623;
		}

		.img-t {
			padding: 24px 20px;
			text-align: right;
			background-color: #303030;

			&>img {
				width: 1rem;
				margin-bottom: .1rem;
			}

			.article-input {
				background: #fff;
				display: flex;
				align-items: center;
				padding: 0 .3rem;
				padding-left: 0;
				overflow: hidden;
				margin-bottom: 12px;
				position: relative;
				border-radius: .2rem;

				div {
					width: 1rem;
					height: 1rem;
					display: flex;
					justify-content: center;
					align-items: center;

					img {
						width: 30px;
						height: 28px;
					}

					.img3 {
						width: 18px;
						height: 18px;
					}
				}

				input {
					flex: 1;
					line-height: 1rem;
					background: transparent;
					border: none;
					font-size: .4rem;
					color: #f49623;

					&::-webkit-input-placeholder {
						color: #f49623;
					}
				}

				.wangji {
					width: 60px;
					font-size: 12px;
				}

				.wangji a {
					color: #f49623;
				}

				// &:after{
				//     position: absolute;
				//     content: ' ';
				//     width: 1px;
				//     height: .6rem;
				//     background: rgb(127,127,127);
				//     left: 1.3rem;
				// }
			}

			button {
				width: 100%;
				height: 40px;
				background: linear-gradient(to bottom, #eebf46 0%, #f49321 100%) !important;
				font-size: .4rem;
				border: none;
				color: #fff;
				line-height: 0.9rem;
				border-radius: .2rem;
			}
		}
	}

	.article-btnTow {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin: 5% auto;

		div {
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		a {
			color: #fff;
			font-size: 13px;
			display: block;
		}

		/deep/.van-checkbox__label {
			color: #fff;
			font-size: 12px;
		}

		/deep/.van-checkbox__icon--checked .van-icon {
			color: #fff;
			background-color: transparent;
			border-color: transparent;
			background: linear-gradient(to bottom, #eebf46 0%, #f49321 100%) !important;
		}
	}

	.article-btn {
		display: flex;
		justify-content: center;
		width: 75%;
		margin: 5% auto;

		div {
			height: 38px;
			line-height: 38px;
			border: .01rem solid #fff;
			padding: 5px 10px;
			box-sizing: border-box;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		a {
			color: #fff;
			font-size: 13px;
			display: block;
		}
	}

	.popou_class {
		border-radius: 5px 5px 0 0;
		background-color: rgba(255, 255, 255, .8);
		padding: .5rem;
		height: 8.3rem;

		a {
			display: block;
			font-size: .34rem;
			line-height: 1.3rem;
			background-color: rgba(0, 0, 0, .8);
			margin-bottom: .2rem;
			border-radius: 5px;

			img {
				width: .8rem;
				position: relative;
				top: .1rem;
				margin-right: .3rem;
			}
		}
	}

	.img {
		width: 7rem;
	}

	.qiehuanyuyanBox {
		height: 30px;
		position: absolute;
		top: 20px;
		right: 20px;

		img {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			margin-left: 10px;
		}
	}

	.checklang {
		position: absolute;
		top: 40px;
		left: -2px;
		background-color: #bfbfbf;
		z-index: 1;
		padding: 10px;
		padding-left: 0;
		border-radius: 5px;
	}

	.ul {
		color: #ffffff80;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.li {
			flex: 1;
			text-align: center;
			height: 42px;
			font-size: 16px;
			font-weight: 600;
			line-height: 42px;
			text-decoration: none;
			color: #999;
			position: relative;

			i {
				width: 10px;
				height: 10px;
				position: absolute;
				bottom: 0px;
				left: 48%;
				box-sizing: border-box;
				border-top: 5px solid transparent;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-bottom: 5px solid #f49623;
			}
		}

		.li.active {
			color: #fff;
		}
	}

	.bottoms {
		color: #ffe44e;
		font-size: 10px;
		text-align: center;
		min-height: 200px;
		height: calc(100vh - 500px);
		position: relative;

		img {
			width: 105px;
		}

		div {
			height: 20px;
			line-height: 20px;
		}

		.img4 {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 73px;
			background-size: 100% 100%;
			background-image: url('../assets/newimg/loginbottom.png');
		}
	}
</style>